<!DOCTYPE html>
<!--[if lt IE 7]>
    <html class="no-js lt-ie9 lt-ie8 lt-ie7">
    <![endif]-->
    <!--[if IE 7]>
        <html class="no-js lt-ie9 lt-ie8">
        <![endif]-->
        <!--[if IE 8]>
            <html class="no-js lt-ie9">
            <![endif]-->
            <!--[if gt IE 8]>
                <!-->
                <html class="no-js">
                <!--<![endif]-->
                
                <head>
                    <meta charset="utf-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
                    <title></title>
                    <meta name="description" content="">
                    <meta name="viewport" content="width=device-width">
                    <link rel="stylesheet" href="css/bootstrap.min.css">
                    <style>
                        body {
                            padding-top: 50px;
                            padding-bottom: 20px;
                        }
                    </style>
                    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
                    <link rel="stylesheet" href="css/main.css">
                    <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
                </head>
                
                <body>
                    <!--[if lt IE 7]>
                        <p class="chromeframe">You are using an
                            <strong>outdated</strong>browser. Please
                            <a href="http://browsehappy.com/">upgrade your browser</a>or
                            <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a>to improve your experience.</p>
                    <![endif]-->
                    <div class="navbar navbar-inverse navbar-fixed-top">
                        <div class="container">
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>
                                <a class="navbar-brand" href="index.html"></a>
                            </div>
                            <div class="shadow"></div>
                            <div class="navbar-collapse collapse">
                                <ul class="nav navbar-nav">
                                    <li class="active">
                                        <a href="#" id="home">Home</a>
                                    </li>
                                    <li>
                                        <a href="#" id="profile" style="display:none">Profile</a>
                                    </li>
                                    <li>
                                        <a href="#" id="register">Register</a>
                                    </li>
                                    <li>
                                        <a href="#" id="myDreams" style="display:none">My Dreams</a>
                                    </li>
                                    <li>
                                        <a href="#" id="findDreams">Find Dreams</a>
                                    </li>
                                    <li>
                                        <a href="#logout" id="logout" style="display:none;">Logout</a>
                                    </li>
                                    <li>
                                        <a href="#contact">Contact</a>
                                    </li>
                                </ul>
                                <div class="navbar-form navbar-right" id="loggedIn" style="display:none;">asd</div>
                                <form class="navbar-form navbar-right" id="loginForm">
                                    <div class="form-group">
                                        <input type="text" id="lMail" placeholder="Email" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <input type="password" placeholder="Password" class="form-control">
                                    </div>
                                    <input type="button" class="btn" id="loginBtn" value="login" />
                                </form>
                            </div>
                            <!--/.navbar-collapse -->
                        </div>
                    </div>
                    <!-- Main jumbotron for a primary marketing message or call to action -->
                    <div class="container " id="welcomeScreen">
                        <!-- Example row of columns -->
                        <!-- Example row of columns -->
                        <div class="row">
                            <div class="col-lg-12 hpButtons">
                                <input type="button" id="makeMyDreamComeTrue" href="#" name="makeMyDreamComeTrue" class="btn bt-green" value="Make my Dream com True">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 hpButtonsLess">
                                <input type="button" id="makeADreamComeTrue" href="#" name="makeADreamComeTrue" class="btn bt-green"  value="Make a Dream com True">  </div>
                        </div>
                        <hr>
                        <footer>
                            <p>&copy; Company 2013</p>
                        </footer>
                    </div>
                    <!--Make My Dream Form>-->
                    <form id="makeMyDreamForm" style="display:none;">
                        <fieldset>
                            <!-- Form Name -->
                            <legend>Make My Dream</legend>
                            <!-- Textarea -->
                            <div class="form-group">
                                <label class="control-label" for="iWanTo">I want to</label>
                                <div class="controls">
                                    <textarea id="iWanTo" name="iWanTo">Write down your dream</textarea>
                                </div>
                            </div>
                            <!-- Select Basic -->
                            <div class="control-group">
                                <label class="control-label" for="type">Choose an experience</label>
                                <div class="controls">
                                    <select id="experienceId" name="experienceId" class="input-xlarge">
                                        <option>Snow</option>
                                        <option>Beach</option>
                                    </select>
                                </div>
                            </div>
                            <!-- Select Basic -->
                            <div class="control-group">
                                <label class="control-label" for="country">Select a Country</label>
                                <div class="controls">
                                    <select id="countryId" name="countryId" class="input-xlarge">
                                        <option>Brazil</option>
                                        <option>Portugal</option>
                                    </select>
                                </div>
                            </div>
                            <!-- Select Basic -->
                            <div class="control-group">
                                <label class="control-label" for="priceMax">Price (max)</label>
                                <div class="controls">
                                    <input id="price" name="price" type="number" placeholder="100" class="input-xlarge" required="">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="arrival">Arrival</label>
                                <div class="controls">
                                    <input id="arrival" name="arrival" type="date" placeholder="" class="input-xlarge" required="">
                                </div>
                            </div>
                            <!-- Multiple Radios (inline) -->
                            <div class="control-group">
                                <label class="control-label" for="departure">Departure</label>
                                <div class="controls">
                                    <input id="departure" name="departure" type="date" placeholder="" class="input-xlarge" required="">
                                </div>
                            </div>
                            <div class="control-group">
                                <div class="controls">
                                    <label class="checkbox inline" for="flexible">Flexible
                                        <input type="checkbox" name="flexible" id="flexible" value="yes">
                                    </label>
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="numPersons">Number of People</label>
                                <div class="controls">
                                    <input id="numPersons" name="numPersons" type="number" placeholder="" class="input-xlarge" required="">
                                </div>
                            </div>
                            <div class="control-group">
                                <div class="controls">
                                    <label class="checkbox inline" for="flexible">Accomodation
                                        <input type="checkbox" name="accomodation" id="accomodation" value="yes">
                                    </label>
                                </div>
                            </div>
                            <div class="control-group">
                                <div class="controls">
                                    <label class="checkbox inline" for="meals">Meals
                                        <input type="checkbox" name="meals" id="meals" value="yes">
                                    </label>
                                </div>
                            </div>
                            <div class="control-group">
                                <div class="controls">
                                    <label class="checkbox inline" for="transportation">Transportation
                                        <input type="checkbox" name="transportation" id="transportation" value="1234">
                                    </label>
                                </div>
                            </div>
                            <!-- Button -->
                            <div class="control-group">
                                <div class="controls">
                                    <input type="button" class="btn" id="submiteMyDream" value="Submit" />
                                </div>
                            </div>
                        </fieldset>
                    </form>
                    <!--/Make My Dream Form>-->
                    <!--Dream Finder>-->
                    <form class="form" id="findADreamStore" style="display:none">
                        <!-- Form Name -->
                        <legend>Find a Dream</legend>
                        <!-- Search input-->
                        <div class="form-group">
                            <label class="control-label" for="type">Choose an experience</label>
                            <div class="controls">
                                <select id="experienceId" name="experienceId" class="input-xlarge">
                                    <option>Snow</option>
                                    <option>Beach</option>
                                </select>
                            </div>
                        </div>
                        <!-- Select Basic -->
                        <div class="form-group">
                            <label class="control-label" for="country">Select a Country</label>
                            <div class="controls">
                                <select id="countryId" name="countryId" class="input-xlarge">
                                    <option>Brazil</option>
                                    <option>Portugal</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="numPersons">Number of People</label>
                            <div class="controls">
                                <input id="numPersons" name="numPersons" type="number" placeholder="" class="input-xlarge" required="">
                            </div>
                        </div>
                        <!-- Button -->
                        <div class="control-group">
                            <div class="controls">
                                <button id="singlebutton" name="singlebutton" class="btn btn-primary">Button</button>
                            </div>
                        </div>
                    </form>
                    <!--/Dream Finder>-->
                    <!-- Register Form>-->
                    <form class="form-horizontal" id="registrationForm" style="display:none;">
                        <fieldset>
                            <!-- Form Name -->
                            <legend>Registration</legend>
                            <!-- Text input-->
                            <div class="control-group">
                                <label class="control-label" for="name">Name</label>
                                <div class="controls">
                                    <input id="name" name="name" type="text" placeholder="Your Name" class="input-xlarge" required="">
                                </div>
                            </div>
                            <!-- Password input-->
                            <div class="control-group">
                                <label class="control-label" for="password">Password</label>
                                <div class="controls">
                                    <input id="password" name="password" type="password" placeholder="Password" class="input-xlarge">
                                </div>
                            </div>
                            <!-- Password input-->
                            <div class="control-group">
                                <label class="control-label" for="cpassword">Confirm Password</label>
                                <div class="controls">
                                    <input id="cpassword" name="cpassword" type="password" placeholder="confirm" class="input-xlarge" required="">
                                </div>
                            </div>
                            <!-- Text input-->
                            <div class="control-group">
                                <label class="control-label" for="address">Address</label>
                                <div class="controls">
                                    <input id="address" name="address" type="text" placeholder="Your Address" class="input-xlarge" required="">
                                </div>
                            </div>
                            <!-- Text input-->
                            <div class="control-group">
                                <label class="control-label" for="phone">Phone</label>
                                <div class="controls">
                                    <input id="phone" name="phone" type="text" placeholder="Your Phone" class="input-xlarge" required="">
                                </div>
                            </div>
                            <!-- Text input-->
                            <div class="control-group">
                                <label class="control-label" for="email">E-Mail</label>
                                <div class="controls">
                                    <input id="email" name="email" type="text" placeholder="Your E-Mail" class="input-xlarge" required="">
                                </div>
                            </div>
                            <!-- Select Basic -->
                            <div class="control-group">
                                <label class="control-label" for="type">Type</label>
                                <div class="controls">
                                    <select id="type" name="type" class="input-xlarge">
                                        <option>Dreamer</option>
                                        <option>Dream Maker</option>
                                    </select>
                                </div>
                            </div>
                            <!-- Button -->
                            <div class="control-group">
                                <label class="control-label" for="register"></label>
                                <div class="controls">
                                    <input type="button" class="btn" id="register" value="Register" />
                                </div>
                            </div>
                        </fieldset>
                    </form>
                    <!-- /Register Form>-->
                    <!-- Propose Dreams -->
                    <form class="form-horizontal" id="proposeADreamForm" style="display:none;">
                        <fieldset>
                            <!-- Form Name -->
                            <legend>Propose Dream</legend>
                            <!-- Text input-->
                            <div class="control-group">
                                <label class="control-label" for="textinput">Text Input</label>
                                <div class="controls">
                                    <input id="textinput" name="textinput" type="text" placeholder="placeholder" class="input-xlarge">
                                    <p class="help-block">help</p>
                                </div>
                            </div>
                            <!-- Text input-->
                            <div class="control-group">
                                <label class="control-label" for="textinput">Text Input</label>
                                <div class="controls">
                                    <input id="textinput" name="textinput" type="text" placeholder="placeholder" class="input-xlarge">
                                    <p class="help-block">help</p>
                                </div>
                            </div>
                            <!-- Text input-->
                            <div class="control-group">
                                <label class="control-label" for="textinput">Text Input</label>
                                <div class="controls">
                                    <input id="textinput" name="textinput" type="text" placeholder="placeholder" class="input-xlarge">
                                    <p class="help-block">help</p>
                                </div>
                            </div>
                            <!-- Text input-->
                            <div class="control-group">
                                <label class="control-label" for="textinput">Text Input</label>
                                <div class="controls">
                                    <input id="textinput" name="textinput" type="text" placeholder="placeholder" class="input-xlarge">
                                    <p class="help-block">help</p>
                                </div>
                            </div>
                            <!-- Button -->
                            <div class="control-group">
                                <label class="control-label" for="submiteDream">Single Button</label>
                                <div class="controls">
                                    <button id="submiteDream" name="submiteDream" class="btn btn-primary">Submit</button>
                                </div>
                            </div>
                        </fieldset>
                    </form>
                    <div class="table-responsive" id="viewMyDream" style="display:none">
                        <!-- Form Name -->
                        <legend>View My Dream</legend>
                        <table class="table-condensed">
                            <tr>
                                <td>
                                    <label class="control-label" for="type">I want to</label>
                                </td>
                                <td>
                                    <label class="control-label" for="type">experience</label>
                                </td>
                                <td>
                                    <label class="control-label" for="country">Country</label>
                                </td>
                                <td>
                                    <label class="control-label" for="country">Price (max)</label>
                                </td>
                                <td>
                                    <label class="control-label" for="arrival">Arrival</label>
                                </td>
                                <td>
                                    <label class="control-label" for="arrival">Departure</label>
                                </td>
                            </tr>
                            <tr>
                                <td id="iWanToR"></td>
                                <td id="experienceIdR"></td>
                                <td id="countryIdR"></td>
                                <td id="priceR"></td>
                                <td id="arrivalR"></td>
                                <td id="departureR"></td>
                            </tr>
                        </table>
                        <table class="table-condensed">
                            <tr>
                                <td>
                                    <label class="control-label" for="arrival">Flexibile</label>
                                </td>
                                <td>
                                    <label class="control-label" for="arrival">Number of People</label>
                                </td>
                                <td>
                                    <label class="control-label" for="arrival">Acommodation</label>
                                </td>
                                </td>
                                <td>
                                    <label class="control-label" for="arrival">Meals</label>
                                </td>
                                </td>
                                <td>
                                    <label class="control-label" for="arrival">Transportation</label>
                                </td>
                            </tr>
                            <tr>
                                <td id="flexibleR"></td>
                                <td id="numPersonsR"></td>
                                <td id="accomodationR"></td>
                                <td id="mealsR"></td>
                                <td id="transportationR"></td>
                            </tr>
                        </table>
                    </div>
                    <!--/Propose Dreams -->
                    <script src="js/vendor/jquery-1.10.1.min.js"></script>
                    <script src="js/vendor/bootstrap.js"></script>
                    <script src="js/vendor/underscore.js"></script>
                    <script src="js/vendor/backbone.js"></script>
                    <script src="js/vendor/bootstrap.min.js"></script>
                    <script src="js/Mediator.js"></script>
                    <script src="js/Model/User.js"></script>
                    <script src="js/Model/Dream.js"></script>
                    <script src="js/View/ProposeADreamForm.js"></script>
                    <script src="js/View/FindADreamStore.js"></script>
                    <script src="js/View/RegistrationForm.js"></script>
                    <script src="js/View/MakeMyDreamForm.js"></script>
                    <script src="js/View/MakeMyDream.js"></script>
                    <script src="js/View/WelcomeScreen.js"></script>
                    <script src="js/main.js"></script>
                </body>
                
                </html>